<!DOCTYPE html>
<html>

<head>
    <meta charset="UTF-8">
    <title>翻译树</title>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1" />
    <meta name="supported-color-schemes" content="light dark">
    <link rel="icon" href="./logo/logo.svg" type="image/x-icon">
    <link rel="apple-touch-icon" href="./logo/logo.svg">
</head>

<body class="text-xl md:text-base">
    <div id="main" class="grid gap-4 p-4 min-h-screen">
        <div class="icon-pel flex items-center justify-end gap-2" id="bar">
            <e-select id="change_tree" class="cursor-pointer" title="切换树"></e-select>
            <button id="add_tree" title="添加到新树"><img src="./assets/icons/add.svg" class="icon"></button>
            <div id="show_setting" title="设置"><img src="./assets/icons/setting.svg" class="icon"></div>
        </div>
        <div class="p-2" id="input">
            <textarea name="i" id="i"
                class="hover:shadow-md rounded-lg focus:border-sky-500 border-2 transition outline-none p-2 resize-none w-full h-full text-4xl md:text-base"
                placeholder="输入文字以翻译"></textarea>
        </div>
        <div id="text"></div>
        <div id="translators"></div>
    </div>
    <div id="设置"
        class="fixed top-0 left-0 flex flex-col gap-12 w-screen h-screen items-center overflow-auto bg-white transition-opacity z-10 setting_hide overscroll-none py-20">
        <div id="树管理">
            <h2>树管理</h2>
            <div id="tree_mana"></div>
        </div>
        <div id="密码">
            <h2>密码</h2>
            <div>
                <h3>百度</h3>
                <p><a href="https://fanyi-api.baidu.com/product/11" target="_blank"
                        rel="noopener noreferrer">百度api申请</a></p>
                <div><span>appid</span><input type="text" name="baidu_appid" id="baidu_appid"></div>
                <div><span>key</span><input type="text" name="baidu_key" id="baidu_key"></div>
            </div>
            <div>
                <h3>有道</h3>
                <p><a href="https://ai.youdao.com/product-fanyi-text.s" target="_blank"
                        rel="noopener noreferrer">有道api申请</a></p>
                <div><span>appid</span><input type="text" name="youdao_appid" id="youdao_appid"></div>
                <div><span>key</span><input type="text" name="youdao_key" id="youdao_key"></div>
            </div>
            <div>
                <h3>Deepl</h3>
                <p><a href="https://www.deepl.com/pro-api?cta=header-pro-api" target="_blank"
                        rel="noopener noreferrer">Deepl api申请</a></p>
                <div><span>key</span><input type="text" name="deepl_key" id="deepl_key"></div>
            </div>
            <div>
                <h3>彩云</h3>
                <p><a href="https://docs.caiyunapp.com/blog/2018/09/03/lingocloud-api/" target="_blank"
                        rel="noopener noreferrer">彩云api申请</a></p>
                <div><span>key</span><input type="text" name="caiyun_key" id="caiyun_key"></div>
            </div>
            <div>
                <h3>必应</h3>
                <p><a href="https://learn.microsoft.com/zh-cn/azure/cognitive-services/translator/how-to-create-translator-resource#authentication-keys-and-endpoint-url"
                        target="_blank" rel="noopener noreferrer">必应api申请</a></p>
                <div>key:<input type="text" name="bing_key" id="bing_key"></div>
            </div>
        </div>
        <div id="高级" class="icon-pel flex gap-2">
            <div id="down_setting"><img src="./assets/icons/setting_down.svg" class="icon"></div>
            <div id="up_setting"><img src="./assets/icons/setting_up.svg" class="icon"></div>
        </div>
        <div id="exit_setting" class="icon-m right-4 top-4" title="退出并保存设置"><img src="./assets/icons/left.svg"
                class="icon"></div>
    </div>
    <footer class="flex gap-4 flex-col items-center md:flex-row md:justify-evenly">
        <div id="about">
            <div class="flex items-center flex-col">
                <img src="./public/logo/logo.svg" alt="logo" width="64">
                <div class="font-semibold text-xl">翻译树</div>
                <div>树状组合翻译引擎</div>
            </div>
        </div>
        <div class="flex flex-col items-center gap-2">
            <div class="flex gap-1">
                <a href="https://github.com/xushengfeng/fanyishu" target="_bank"><img src="./assets/other/Github.svg"
                        alt="Github"></a>
                <a href="https://gitee.com/xsf-root/fanyishu" target="_bank"><img src="./assets/other/Gitee.svg"
                        alt="Gitee"></a>
            </div>
            <div>
                <a href="https://github.com/xushengfeng/fanyishu" target="_bank"><img
                        src="https://img.shields.io/github/stars/xushengfeng/fanyishu?style=social"
                        alt="Github star"></a>
            </div>
            <div>
                <a href="https://www.netlify.com" target="_blank"> <img
                        src="https://www.netlify.com/v3/img/components/netlify-light.svg" alt="Deploys by Netlify" />
                </a>
            </div>

        </div>
        <div id="link" class="flex flex-col">
            <a href="http://esearch-app.netlify.app" target="_blank" rel="noopener noreferrer">eSearch 主项目</a>
            <a href="https://yuansou.netlify.app" target="_blank" rel="noopener noreferrer">eSearch 元搜索引擎</a>
            <a href="http://xlinkote.netlify.app" target="_blank" rel="noopener noreferrer">xlinkote</a>
        </div>
    </footer>
    <div class="e-select-more"></div>
    <script type="module" src="src/translator.ts"></script>
</body>

</html>